<!-- 变压器 -->
<template>
  <div class="content_body_left">
    <ul class="content_body_list">
      <li class="item">
        <div class="label">名称：</div>
        <div class="text">{{ prop.info && prop.info.mc }}</div>
      </li>
      <li class="item">
        <div class="label">类型：</div>
        <div class="text">{{ prop.info && prop.info.lx }}</div>
      </li>
      <li class="item">
        <div class="label">容量：</div>
        <div class="text">{{ prop.info && prop.info.rl }}</div>
      </li>
      <li class="item">
        <div class="label">所属工区：</div>
        <div class="text">{{ prop.info && prop.info.ssgqmc }}</div>
      </li>
      <li class="item">
        <div class="label">地址：</div>
        <div class="text">{{ prop.info && prop.info.dz }}</div>
      </li>
      <li class="item">
        <div class="label">更新时间：</div>
        <div class="text">{{ prop.info && time(prop.info.modifyAt) }}</div>
      </li>
      <li class="item">
        <div class="label">附件：</div>
        <div class="text">{{ prop.info && prop.info.tplj }}</div>
      </li>
    </ul>
    <div>
      <ColumnLabel label="变压器管辖设备"></ColumnLabel>
    </div>
    <div class="echarts">
      <BarView :data="list" :colors="['#9285FF']" id="transformer2" />
    </div>
  </div>
</template>
<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { dayjs } from 'element-plus'
import { transformerGetDeviceByIdGet } from '@/api/usemap'
import BarView from '../echarts/BarView.vue'

const prop = defineProps(['info'])
//  时间转换
const time = (value: number) => {
  if (!value) return ''
  return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
}
//  图标数据
let list = ref<any>([])
const init = async () => {
  try {
    const { data } = await transformerGetDeviceByIdGet(prop.info.id)
    if (data.length > 0) {
      let lampNum: number = 0
      let lampPostNum: number = 0
      let loopNum: number = 0
      data.forEach((item: any) => {
        for (const key in item) {
          if (Object.prototype.hasOwnProperty.call(item, key)) {
            if (key === '灯') {
              lampNum++
            } else if (key === '灯杆') {
              lampPostNum++
            } else if (key === '回路') {
              loopNum++
            }
          }
        }
      })
      list.value = [
        { name: '灯', number: lampNum },
        { name: '灯杆', number: lampPostNum },
        { name: '回路', number: loopNum }
      ]
    }
  } catch (error) {

  }

}
onMounted(() => {
  init()
})
</script>

<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 200px;
}
</style>